<template>
  <div style="width: 100%; height: 100%" ref="chartsDOM"></div>
</template>
<script>
import * as echarts from 'echarts'
import getGuangXiMap from '../../api/json/langfang'
import { getAction } from '@/api/manage'
export default {
  data() {
    return {
      dataList:[],
      dataInfo:[]
    }
  },
  created() {
  },
  mounted() {
    
  },
  methods: {
    ininMap(data) {
      this.dataInfo = data
      this.dataList = []
      data.forEach(item=>{
        let obj = {
          name: item.name,
          value: [item.longitude, item.latitude, item.county],
          itemStyle: {
            color: '#1DF9FC',
          },
          rippleEffect: {
            period: 4, //动画时间，值越小速度越快
            brushType: "stroke", //波纹绘制方式 stroke, fill
            scale: 4, //波纹圆环最大限制，值越大波纹越大 4
          },
        }
        this.dataList.push(obj)
      })
      let dataList = this.dataList
      var myChart = echarts.init(this.$refs['chartsDOM'])
      myChart.showLoading()
      myChart.hideLoading()
      echarts.registerMap('GX', getGuangXiMap)
      var option = {
        tooltip: {
          backgroundColor: 'rgba(50,50,50,0.5)',
          formatter: function (params) {
            let index = params.dataIndex
            let iteme = that.dataInfo[index]
            console.log(iteme,'itemeiteme')
            return (
              '<span style="color: #07a6ff;font-size:18px;font-weight:600 ">' +params.name +"</span>"+"<br/>"+
              `企业数量：${iteme.qyzs||'-'}<br/>营业收入：${iteme.yysr||'-'}亿元<br/>上缴税金：${iteme.sjsj||'-'}亿元<br/>从业人员: ${iteme.cyrs||'-'}人`
              // `四上企业: ${2}家<br/>特色产业集群: ${6}<br/>科技创新发展: ${9}家<br/>专精特新发展: 4家<br/>绿色低碳发展: 4家<br/>质量品牌发展: 8家<br/>智能制造发展: 18家<br/>产学研合作：13家`
            );
          },
        },
        geo: {
          show: true,
          map: 'GX',
          boundingCoords: [0, 0], // 移除边界间距
          zoom: 1.25 ,     // 设置初始缩放比例
          label: {
            normal: {
              //静态的时候展示样式
              show: true, //是否显示地图省份得名称
              textStyle: {
                color: '#fff',
                fontSize: 18,
                fontWeight: 'lighter',
              },
            },
            emphasis: {
              //动态展示的样式
              color: '#fff',
            },
          },
          roam: false,
          itemStyle: {
            normal: {
              show: true,
              areaColor: 'rgb(55,140,249)',
              borderColor: 'rgb(41,200,255)',
              borderWidth: 1,
              color: '#ffffff',
              textStyle: {
                color: '#ffffff',
              },
            },
            emphasis: {
              textStyle: {
                color: '#ffffff',
              },
              label: {
                color: '#ffffff',
                fontSize: 18,
              },
              areaColor: 'rgb(41,200,255)',
            },
          },
        },
        series: [
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            symbolSize: 12,
            data: dataList
          },
        ],
      }
      myChart.setOption(option)
      let that = this
      myChart.on('click', function (params,params2) {
          const idx = params.dataIndex;
          if(params.value) {
            let obj = that.dataInfo[idx]
            localStorage.setItem('content',JSON.stringify(obj))
            that.$router.push({
              path: '/dp/index2',
              query:{
                name:obj.county_dictText,
                cid:obj.id,
                county:obj.county
              }
            })
          }
      });
    }
  },
}
</script>
<style lang="less" scoped>
</style>